<script setup lang="ts">
import { ref } from 'vue';
import { Toast } from '../../../components';

const value = ref('');
const keyboard = ref('default');

const onInput = (value: string) => Toast(`输入: ${value}`);
const onDelete = () => Toast("删除");
</script>

<template>
  <demo-block >
    <vcu-cell
      is-link
      title="弹出默认键盘"
      @touchstart.stop="keyboard = 'default'"
    />
    <vcu-cell
      is-link
      title="弹出带右侧栏的键盘"
      @touchstart.stop="keyboard = 'custom'"
    />
    <vcu-cell
      is-link
      title="弹出身份证号键盘"
      @touchstart.stop="keyboard = 'extraKey'"
    />
    <vcu-cell
      is-link
      title="弹出带标题的键盘"
      @touchstart.stop="keyboard = 'title'"
    />
    <vcu-cell
      is-link
      title="弹出配置多个按键的键盘"
      @touchstart.stop="keyboard = 'multiExtraKey'"
    />
    <vcu-cell
      is-link
      title="弹出配置随机数字的键盘"
      @touchstart.stop="keyboard = 'randomKeyOrder'"
    />
    <vcu-input
      v-model="value"
      readonly
      clickable
      label="双向绑定"
      @touchstart.stop="keyboard = 'bindValue'"
    />
  </demo-block>

  <vcu-number-keyboard
    :show="keyboard === 'default'"
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    :show="keyboard === 'custom'"
    close-button-text="关闭"
    theme="custom"
    extra-key="."
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    :show="keyboard === 'extraKey'"
    close-button-text="关闭"
    extra-key="X"
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    :show="keyboard === 'title'"
    close-button-text="关闭"
    title="标题"
    extra-key="."
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    :show="keyboard === 'multiExtraKey'"
    close-button-text="关闭"
    theme="custom"
    :extra-key="['00', '.']"
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    :show="keyboard === 'randomKeyOrder'"
    random-key-order
    @blur="keyboard = ''"
    @input="onInput"
    @delete="onDelete"
  />

  <vcu-number-keyboard
    v-model="value"
    :show="keyboard === 'bindValue'"
    maxlength="6"
    @blur="keyboard = ''"
  />
</template>
